<template>
    <div class="partnerList">
        <div class="partnerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">设计师推荐<i class="el-icon-close"></i></div>
		</div>
        <div class="partnerList_bottom">
            <div class="partnerList_bottom_new">
				<div class="partnerList_bottom_new_goods">
					<div class="partnerList_bottom_new_goods_btn">
						<button @click="addInfomation"><i class="el-icon-trophy"></i>新增推荐</button>
					</div>
					<div class="partnerList_bottom_new_goods_screening">
            卖场：
            <el-select
              v-model="marketId"
              clearable
              @change="selectMarket"
              filterable
              placeholder="请选择卖场"
            >
              <el-option
                v-for="item in marketList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
						<div class="partnerList_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
            <div class="partnerList_table">
                <div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
                            <!-- <th class="avaImg">头像</th> -->
							<th>设计师</th>
							<th>创建时间</th>
							<th>排序</th>
              <th>所属卖场</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.title}}</td>
              <td>{{$moment(v.create_time*1000).format('yyyy-MM-DD')}}</td>
							<td>
                {{v.sort}}
								<!-- <el-input style="width:80px;margin-right:10px;" size="mini" v-model="v.sort"></el-input>
                <el-button type="primary" style="width:60px;text-align:center;" size="mini" @click="changeSort(v.id,v.sort)">确定</el-button> -->
							</td>
              <td>{{v.market_name}}</td>
							<td>
								<button class="editor" @click="toEdit(v.id)">设置</button>
								<button class="shelves" @click="toDel(v.id)">删除</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="page"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								background>
							</el-pagination>
						</div>
					</div>
				</div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      cate: {},
      input: "",
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      tableList: [],
      marketId: "", //卖场id
      marketList: [],
    };
  },
  mounted() {
    this.getInfoList();
    this.remoteMethod();
  },

  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1
      this.pageSize = 10
      this.getInfoList();
    },
    // 获取推荐设计案例列表
    getInfoList() {
        let params = {
            keyword:this.input,
            page:this.page,
            pagesize:this.pageSize,
            market_id:this.marketId
        }
      this.$http.post("/api/root/DesignerRecommend/index",params).then(res => {
        console.log(res, "施工推荐案例列表");
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;
        }
      });
    },


    //点击详情
    toEdit(id) {
      console.log(id);
      this.$router.push({ name: "recomDesginAdd", query: { id } });
    },

    // 删除按钮
    toDel(id) {
      this.$confirm("确定删除该推荐设计师吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/api/root/DesignerRecommend/del", { id })
            .then(res => {
              console.log(res, "删除结果");
              if (res.code == 1) {
                this.getInfoList();
                this.$message.success("删除成功");
              } else {
                this.$message.warning(res.msg);
              }
            });
        })
        .catch(() => {
          console.log("点击取消");
        });
    },

    // 类型
    handerChange() {},

    // 搜索
    handerSeach() {
      
      this.getInfoList();
    },

    // 禁用或启用
    // shelves(id, status) {
    //   console.log(status);
    //   let sta = status == 1 ? 0 : 1;
    //   this.$http
    //     .post("/api/root/designer/changeStatus", { id, status: sta })
    //     .then(res => {
    //       if (res.code == 1) {
    //         this.getDesigList();
    //         this.$message({
    //           type: "success",
    //           message: "操作成功"
    //         });
    //       }
    //     });
    // },
    // 排序按钮
    // changeSort(id, sort) {
    //   console.log(id, sort, "=====");
    //   this.$http
    //     .post("/api/root/StoreShop/sortHomeStore", { id, sort })
    //     .then(res => {
    //       console.log(res, "排序结果");
    //       if (res.code == 1) {
    //         this.getInfoList();
    //         this.$message.success("操作成功");
    //       } else {
    //         this.$message.warning(res.msg);
    //       }
    //     });
    // },

    // 发布对象选择
    roleSelect(e) {
      console.log(e, "对象选择");
      this.getInfoList();
    },

    // 状态选择
    statusSelectFn(e) {
      console.log(e, "状态选择");
      this.getInfoList();
    },

    // 新增按钮
    addInfomation() {
      this.$router.push({ name: "recomDesginAdd", query: {} });
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map(v => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    // // 全选后的删除
    // selectDel(){
    // 	console.log(this.shelvesAlls);
    // 	let res =[...new Set(this.shelvesAlls)]; //去重
    // 	console.log(res);
    // 	let str = res.join(',');
    // 	if(this.shelvesAlls.length){
    // 		this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
    // 			confirmButtonText: '确定',
    // 			cancelButtonText: '取消',
    // 			type: 'warning'
    // 		}).then(()=>{
    // 			this.$http.post('/api/root/designer/del',{id:str}).then(res=>{
    // 				console.log(res);
    // 				if(res.code==1){
    // 					this.getDesigList();
    // 					this.checkAll=false;
    // 					this.checkBoxAll=[];
    // 					this.shelvesAlls=[];
    // 					this.$message({
    // 						type:'success',
    // 						message:'删除成功'
    // 					})
    // 				}
    // 			})
    // 		})
    // 	}else{
    // 		this.$message({
    // 			type:'info',
    // 			message:'请选择要删除的项'
    // 		})
    // 	}
    // },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getInfoList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getInfoList();
    }
  }
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>
